<template>
    <div>
        <Breadcrumb>
        <BreadcrumbItem>管理平台</BreadcrumbItem>
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>网站管理</BreadcrumbItem>
        </Breadcrumb>
        <rl-row>
        <el-button type="primary" :disabled="single" @click="handleUpdate">编辑</el-button>
        <el-button type="success" @click="handleAdd">添加</el-button>
        <el-button type="danger" :disabled="multiple">删除</el-button>
    </rl-row>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="创建日期"
      sortable
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="网站名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="link"
      label="网站链接"
      width="220">
    </el-table-column>
    </el-table>
    <!-- 修改或添加弹框 -->
    <el-dialog :title="title" :visible.sync="open" :append-to-body="true" width="500px">
    <el-from label-width="120px" ref="tableData" :model="tableData">
      <el-from-item label="日期" prop="date">
        日期：<el-input v-model="tableData.date" />
      </el-from-item>
      <el-from-item label="网站名" prop="name">
        网站名：<el-input  v-model="tableData.name" />
      </el-from-item>
      <el-from-item label="网站链接" prop="link">
        网站链接：<el-input  v-model="tableData.link" />
      </el-from-item>
    </el-from>
    <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          date: '2020-08-23',
          name: 'iview',
          link: 'https://iviewui.com/components/avatar'
        }
      ],
      open: false,
      title: '',
      single: true,
      multiple: true
    }
  },
  methods: {
    handleUpdate () {
      this.open = true
      this.title = '修改信息'
    },
    handleAdd () {
      this.open = true
      this.title = '新增类别'
    },
    cancel () {
      this.open = false
    },
    submitFrom () {
      this.open = false
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      // this.ids = selection.map(item => item.postId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
  }
}
</script>
